<template>
  <div class="box-modal" :style="computedShow" @click="maskTap">
    <div class="modal" @click="modalTap" v-on:click.stop="doThis">
      <!-- 主标题 + icon -->
      <template v-if="isContentModel1">
        <div class="modal-title">{{title}}</div>
        <img class="icon-modal" :src="icon" />
      </template>

      <!-- icon + 主标题 + 描述-->
      <template v-if="isContentModel2">
        <img class="icon-modal" :src="icon" />
        <div class="modal-title">{{title}}</div>
        <div class="modal-desc">{{desc}}</div>
      </template>

      <!-- 主标题 + 描述 -->
      <template v-if="isContentModel3">
        <div class="modal-title">{{title}}</div>
        <div class="modal-desc">{{desc}}</div>
      </template>

      <!-- 底部按钮 -->
      <div class="contain-button" v-if="isButtonKnow">
        <div class="item-button button-cancel" @click="hideModal">知道了</div>
      </div>
      <div class="contain-button" v-if="isButtonConfrim">
        <div class="item-button button-cancel" @click="hideModal">取消</div>
        <div class="item-button button-confirm" style="margin-left: 16px;" @click="confirmTap">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
const CONTENT_TYPE = { TITLE: 1, DESC: 2, ICON: 4 };
const BUTTON_TYPY = { KNOW: 0, CONFRIM: 1 };
export default {
  name: "Modal",
  data() {
    return {
      isShowModal: false,
      contentType: 0,
      buttonType: 0,
      maskClose: true,
      /* ------------------- 内容 --------------------- */
      title: "",
      desc: "",
      icon: ""
    };
  },

  methods: {
    showTitleIconModal({ title, icon, maskClose = true }) {
      this.icon = icon;
      this.title = title;
      this.success = undefined;

      this.isShowModal = true;
      this.maskClose = maskClose;
      this.contentType = CONTENT_TYPE.TITLE | CONTENT_TYPE.ICON;
      this.buttonType = BUTTON_TYPY.KNOW;
    },

    showTitleDescIconModal({ title, desc, icon, maskClose = true }) {
      this.icon = icon;
      this.title = title;
      this.desc = desc;
      this.success = undefined;

      this.isShowModal = true;
      this.maskClose = maskClose;
      this.contentType =
        CONTENT_TYPE.TITLE | CONTENT_TYPE.DESC | CONTENT_TYPE.ICON;
      this.buttonType = BUTTON_TYPY.KNOW;
    },

    showTitleDescModal({ title, desc, maskClose = true, success }) {
      this.title = title;
      this.desc = desc;
      this.success = success || this.hideModal;

      this.isShowModal = true;
      this.maskClose = maskClose;
      this.contentType = CONTENT_TYPE.TITLE | CONTENT_TYPE.DESC;
      this.buttonType = BUTTON_TYPY.CONFRIM;
    },

    hideModal() {
      this.isShowModal = false;
    },

    maskTap() {
      if (!this.maskClose) return;
      this.hideModal();
    },

    modalTap() {},

    doThis() {},

    confirmTap() {
      let success = this.success || this.hideModal;
      success();
    }
  },

  mounted() {
    window.modalControl = this;
  },

  destroyed() {
    delete window.modalControl;
  },

  computed: {
    computedShow() {
      return this.isShowModal ? "display: block;" : "display: none;";
    },

    /* -------------- content -------------------- */
    isContentModel1() {
      return this.contentType == (CONTENT_TYPE.TITLE | CONTENT_TYPE.ICON);
    },

    isContentModel2() {
      return (
        this.contentType ==
        (CONTENT_TYPE.TITLE | CONTENT_TYPE.DESC | CONTENT_TYPE.ICON)
      );
    },

    isContentModel3() {
      return this.contentType == (CONTENT_TYPE.TITLE | CONTENT_TYPE.DESC);
    },
    /* ------------------- button ----------------- */
    isButtonKnow() {
      return this.buttonType == BUTTON_TYPY.KNOW;
    },
    isButtonConfrim() {
      return this.buttonType == BUTTON_TYPY.CONFRIM;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 6;
}

.modal {
  width: 360px;
  padding-bottom: 20px;
  background: #fff;
  border-radius: 10px;

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* flex */
  display: flex;
  align-items: center;
  flex-direction: column;
}

.modal .modal-title {
  margin-top: 30px;
  font-size: 18px;
  color: rgba(51, 51, 51, 1);
}

.modal .modal-desc {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
}

.modal .icon-modal {
  margin-top: 20px;
  width: 58px;
  height: 58px;
  background: #ff3;
  border-radius: 50%;
}

.contain-button {
  margin-top: 20px;
  width: 100%;
  height: 62px;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: center;
}

.contain-button .item-button {
  width: 120px;
  height: 38px;
  border-radius: 6px;
  /* text */
  font-size: 14px;
  line-height: 38px;
  text-align: center;
}

.contain-button .button-cancel {
  background: rgba(250, 250, 250, 1);
  border: 1px solid rgba(208, 208, 208, 1);
  /* text */
  color: rgba(51, 51, 51, 1);
}

.contain-button .button-confirm {
  background: rgba(0, 153, 255, 1);
  border: 1px solid #0099ff;
  /* text */
  color: rgba(255, 255, 255, 1);
}
</style>
